AI game creator

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

No:1400

224

←

Prev Next

→

Huxla Games
Developer User3328｜Date and time 23/6/18 13:50:19
Build time 47.622 sec｜Game capacity 5.999KB｜

Script

を作成しました。

Score: 0

このハクスラゲームでは、黄色いプレイヤーを操作して赤い敵を倒すことでスコアを得ます。敵に触れるとプレイヤーの体力が減り、0になるとゲームオーバーです。画面上には常にスコアが表示されます。絵文字は使用していませんが、楽しんでプレイしてください！

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

を作成しました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ハクスラゲーム</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        canvas {
            display: block;
        }
        #score-board {
            position: fixed;
            top: 0;
            right: 0;
            background-color: white;
            font-size: 24px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <canvas width="360" height="640"></canvas>
    <div id="score-board">Score: 0</div>
    <script>
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');
        const scoreBoard = document.querySelector('#score-board');
        let score = 0;

class Player {
            constructor(x, y, speed, health, attack) {
                this.x = x;
                this.y = y;
                this.speed = speed;
                this.maxHealth = health;
                this.health = health;
                this.attack = attack;
                this.color = 'yellow';
                this.width = 50;
                this.height = 50;
            }

draw() {
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }

update() {
                if (keys.ArrowUp) {
                    this.y -= this.speed;
                }
                if (keys.ArrowDown) {
                    this.y += this.speed;
                }
                if (keys.ArrowLeft) {
                    this.x -= this.speed;
                }
                if (keys.ArrowRight) {
                    this.x += this.speed;
                }

this.x = Math.max(0, Math.min(canvas.width - this.width, this.x));
                this.y = Math.max(0, Math.min(canvas.height - this.height, this.y));
            }

takeDamage(damage) {
                this.health = Math.max(0, this.health - damage);
            }

isDead() {
                return this.health <= 0;
            }
        }

class Enemy {
            constructor(x, y, speed, health, attack) {
                this.x = x;
                this.y = y;
                this.speed = speed;
                this.maxHealth = health;
                this.health = health;
                this.attack = attack;
                this.color = 'red';
                this.width = 50;
                this.height = 50;
            }

draw() {
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }

update() {
                const dx = player.x - this.x;
                const dy = player.y - this.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                const xSpeed = (dx / distance) * this.speed;
                const ySpeed = (dy / distance) * this.speed;
                this.x += xSpeed;
                this.y += ySpeed;

this.x = Math.max(0, Math.min(canvas.width - this.width, this.x));
                this.y = Math.max(0, Math.min(canvas.height - this.height, this.y));
            }

takeDamage(damage) {
                this.health = Math.max(0, this.health - damage);
            }

isDead() {
                return this.health <= 0;
            }
        }

const player = new Player(canvas.width / 2, canvas.height / 2, 5, 100, 10);
        const enemies = [];

function update() {
            player.update();

for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                enemy.update();
                if (enemy.isDead()) {
                    score += 10;
                    enemies.splice(i, 1);
                    i--;
                }
            }

for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                if (collides(player, enemy)) {
                    player.takeDamage(enemy.attack);
                    if (player.isDead()) {
                        alert('Game over!');
                        location.reload();
                    }
                }
            }

if (Math.random() < 0.01) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const speed = 2;
                const health = 50;
                const attack = 5;
                const enemy = new Enemy(x, y, speed, health, attack);
                enemies.push(enemy);
            }

scoreBoard.textContent = `Score: ${score}`;
        }

function draw() {
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

player.draw();

for (const enemy of enemies) {
                enemy.draw();
            }
        }

function collides(a, b) {
            return a.x < b.x + b.width &&
                   a.x + a.width > b.x &&
                   a.y < b.y + b.height &&
                   a.y + a.height > b.y;
        }

const keys = {};

window.addEventListener('keydown', e => {
            keys[e.code] = true;
        });

window.addEventListener('keyup', e => {
            keys[e.code] = false;
        });

setInterval(() => {
            update();
            draw();
        }, 1000 / 60);
    </script>
</body>
</html>