AI game creator

Click here for free DL of the app version that can save data.

No:16327

122

←

Prev Next

→

Shooting Game
Developer User7236｜Date and time 23/9/17 9:48:04
Build time 42.003 sec｜Game capacity 6.04KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>射击游戏</title>
    <style>
        body {
            overflow: hidden;
        }
        
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// 玩家相关
        var player;
        var playerWidth = 50;
        var playerHeight = 50;
        var playerSpeedX = 5;
        var playerImage;

// 子弹相关
        var bullets;
        var bulletWidth = 4;
        var bulletHeight = 20;
        var bulletSpeedY = 8;
        var bulletImage;

// 敌人相关
        var enemies;
        var enemyWidth = 50;
        var enemyHeight = 50;
        var enemySpeedY = 2;
        var enemyImage;

// 得分
        var score = 0;

// 初始化游戏
        function gameInitialize() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

// 加载图像资源
            playerImage = new Image();
            playerImage.src = 'player.png';

bulletImage = new Image();
            bulletImage.src = 'bullet.png';

enemyImage = new Image();
            enemyImage.src = 'enemy.png';

// 玩家初始化
            player = {
                x: canvasWidth / 2 - playerWidth / 2,
                y: canvasHeight - playerHeight - 10,
                width: playerWidth,
                height: playerHeight,
                image: playerImage
            };

// 子弹初始化
            bullets = [];

// 敌人初始化
            enemies = [{
                x: 50,
                y: 10,
                width: enemyWidth,
                height: enemyHeight,
                image: enemyImage
            }];

canvas.addEventListener('mousemove', playerMove);

setInterval(gameUpdate, 16);
        }

// 更新游戏
        function gameUpdate() {
            movePlayer();
            moveBullets();
            moveEnemies();
            drawGame();
            checkCollision();
        }

// 绘制游戏界面
        function drawGame() {
            // 清空画布
            canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);

// 绘制玩家
            canvasContext.drawImage(player.image, player.x, player.y, player.width, player.height);

// 绘制子弹
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                canvasContext.drawImage(bullet.image, bullet.x, bullet.y, bullet.width, bullet.height);
            }

// 绘制敌人
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                canvasContext.drawImage(enemy.image, enemy.x, enemy.y, enemy.width, enemy.height);
            }

// 绘制得分
            canvasContext.font = '20px Arial';
            canvasContext.fillText('得分: ' + score, 10, 30);
        }

// 移动玩家
        function movePlayer() {
            if (player.x < 0) {
                player.x = 0;
            }

if (player.x + player.width > canvasWidth) {
                player.x = canvasWidth - player.width;
            }
        }

// 移动子弹
        function moveBullets() {
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                bullet.y -= bulletSpeedY;

if (bullet.y < 0) {
                    bullets.splice(i, 1);
                    i--;
                }
            }
        }

// 移动敌人
        function moveEnemies() {
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                enemy.y += enemySpeedY;

if (enemy.y > canvasHeight) {
                    enemies.splice(i, 1);
                    i--;
                }
            }

// 每1秒添加一个新敌人
            if (Math.random() < 0.02) {
                enemies.push({
                    x: Math.random() * (canvasWidth - enemyWidth),
                    y: -enemyHeight,
                    width: enemyWidth,
                    height: enemyHeight,
                    image: enemyImage
                });
            }
        }

// 玩家移动事件
        function playerMove(event) {
            var mouseX = event.clientX - canvas.offsetLeft;
            player.x = mouseX - playerWidth / 2;
        }

// 射击事件
        function shoot() {
            var bullet = {
                x: player.x + player.width / 2 - bulletWidth / 2,
                y: player.y - bulletHeight,
                width: bulletWidth,
                height: bulletHeight,
                image: bulletImage
            };

bullets.push(bullet);
        }

// 碰撞检测
        function checkCollision() {
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];

for (var j = 0; j < enemies.length; j++) {
                    var enemy = enemies[j];

if (bullet.x < enemy.x + enemy.width &&
                        bullet.x + bullet.width > enemy.x &&
                        bullet.y < enemy.y + enemy.height &&
                        bullet.y + bullet.height > enemy.y) {
                        bullets.splice(i, 1);
                        i--;

enemies.splice(j, 1);
                        j--;

score += 10;
                    }
                }
            }
        }

// 游戏开始
        gameInitialize();
    </script>
</body>
</html>