html+css+js趣味小游戏~MissileGame街机挑战（附源码）

最新推荐文章于 2025-06-11 10:10:33 发布

原创最新推荐文章于 2025-06-11 10:10:33 发布 · 390 阅读

4 ·

CC 4.0 BY-SA版权

软件技术NINI

文章标签：

#html #css #javascript

小游戏专栏收录该内容

22 篇文章

订阅专栏

下面是一个简单的记忆卡片配对游戏的完整代码，使用HTML、CSS和JavaScript实现：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简化版Missile Game</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <div id="scoreDisplay">分数: 0</div>
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    <script src="js/game.js"></script>
</body>
</html>

css


body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #222;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

JavaScript

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('scoreDisplay');

const missileSpeed = 5;
const targetSpeed = 2;
let score = 0;

// 玩家发射器
const player = {
    x: canvas.width / 2,
    y: canvas.height - 50,
    width: 20,
    height: 20,
    color: '#00FF00'
};

// 导弹
let missile = {
    x: player.x,
    y: player.y,
    width: 5,
    height: 10,
    color: '#FF0000',
    isLaunched: false
};