EasterShibGpt
Score
0
High Score
0
こちらが実装例となります。セキュリティ脆弱性があると判断される部分は削除し、ユーザー要望に沿って実装しました。
```
<!DOCTYPE html>
<html>
<head>
<title>EasterShibGpt Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
canvas {
display: block;
margin: auto;
background-color: #ffffff;
border: 1px solid #000000;
padding: 0;
cursor: none;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: red;">EasterShibGpt</h1>
<canvas id="gameCanvas" width="480" height="320"></canvas>
<div style="display: flex; justify-content: space-between; margin-top: 20px;">
<div style="width: 150px; text-align: center;">
<h3>Score</h3>
<p id="score">0</p>
</div>
<div style="width: 150px; text-align: center;">
<h3>High Score</h3>
<p id="highScore">0</p>
</div>
<div style="width: 150px; text-align: center;">
<button id="restartBtn">Restart Game</button>
</div>
</div>
<script>
// Game Variables
var canvas;
var canvasContext;
var dogImg;
var poopsImg;
var dogX = 225;
var dogY = 280;
var dogSpeed = 4;
var poops = [];
var poopsSpeed = 3;
var poopsInterval = 1000; // in milliseconds
var lastPoopsTime = 0;
var score = 0;
var highScore = 0;
// Startup function
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
loadImages();
setInterval(updateGame, 20);
document.getElementById('restartBtn').onclick = function() {
restartGame();
};
document.onkeydown = function(event) {
moveDog(event);
}
}
// Load Images function
function loadImages() {
dogImg = new Image();
dogImg.src = 'https://i.imgur.com/gpTdZmv.png';
poopsImg = new Image();
poopsImg.src = 'https://i.imgur.com/Cm9u9o4.png';
}
// Update Game function
function updateGame() {
movePoops();
updateScore();
drawGame();
}
// Draw Game function
function drawGame() {
// Clear canvas
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw dog
canvasContext.drawImage(dogImg, dogX, dogY);
// Draw poops
for (var i = 0; i < poops.length; i++) {
canvasContext.drawImage(poopsImg, poops[i].x, poops[i].y);
}
}
// Move Dog function
function moveDog(event) {
if (event.keyCode == 37) { // left arrow
dogX -= dogSpeed;
} else if (event.keyCode == 39) { // right arrow
dogX += dogSpeed;
}
// Keep dog within game screen
if (dogX < 0) {
dogX = 0;
} else if (dogX > canvas.width - 60) {
dogX = canvas.width - 60;
}
}
// Move Poops function
function movePoops() {
var currentTime = Date.now();
if (currentTime - lastPoopsTime > poopsInterval) {
lastPoopsTime = currentTime;
addPoops();
}
for (var i = 0; i < poops.length; i++) {
poops[i].y += poopsSpeed;
// If poop touches bottom of screen
if (poops[i].y > canvas.height) {
poops.splice(i, 1);
score += 10;
}
// If poop touches dog
if (poops[i].y + 32 > dogY && poops[i].y < dogY + 60 && poops[i].x + 32 > dogX && poops[i].x < dogX + 60) {
poops.splice(i, 1);
score -= 15;
}
}
}
// Add Poops function
function addPoops() {
var poopX = Math.floor(Math.random() * (canvas.width - 32)); // Random x position
poops.push({x: poopX, y: -32}); // Add poop to array
}
// Update Score function
function updateScore() {
if (score > highScore) {
highScore = score;
}
document.getElementById('score').innerHTML = score;
document.getElementById('highScore').innerHTML = highScore;
}
// Restart Game function
function restartGame() {
dogX = 225;
poops = [];
score = 0;
}
</script>
</body>
</html>
```
また、ユーザー要望に沿うジョークとして、以下のようなものを盛り込むことができます。
- 「EasterShibGpt」は、イースターと犬のシベリアンハスキーとGPT-3を掛け合わせた造語で、全く関係のない要素が合体していることに笑ってもらえるかもしれません。
- リスタートボタンの代わりに、ボタンに「Woof!」という文字を使用することで、犬がリスタートをするように見えるような演出を追加することができます。