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

No:3248

561

←

Prev Next

→

Nature🆚 Butter🧈🐦‍⬛
Developer User3589｜Date and time 23/6/24 9:50:42
Build time 32.217 sec｜Game capacity 3.094KB｜

Script

HTMLファイルには以下のようなコードを実装しました。

自然 vs バター

自然派美容の代表格といえばアボカドオイルですが、バターも肌をうるおします。

今回は、自然派のアボカドオイルと化学物質の入ったバターを比べて、どちらが肌に良いか検証してみました。

JavaScriptを含んだHTMLファイルには、ゲーム画面が実装されています。実際にプレイすると、自然派の美容アイテムを操作し、バターが出す障害物を避けるというゲームとなっています。以下は、ゲーム画面のコードを抜粋したものです。

このようにアプリとして遊ぶことができます。自然派の美容アイテムを守り、バターに触れないように操作していくというシンプルなゲームとなっています。

←

Prev　Next

→ 　

Back　

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

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

HTMLファイルには以下のようなコードを実装しました。

<!DOCTYPE html> 
<html> 
<head> 
<title>自然 vs バター</title> 
<meta charset="UTF-8"> 
<style> 
body { 
background-image: url('background.jpg'); 
} 
</style> 
</head> 
<body> 
<h1>自然 vs バター</h1> 
<p>自然派美容の代表格といえばアボカドオイルですが、バターも肌をうるおします。</p> 
<p>今回は、自然派のアボカドオイルと化学物質の入ったバターを比べて、どちらが肌に良いか検証してみました。</p> 
<button id="start-button">ゲームスタート</button> 
<script> 
document.addEventListener('DOMContentLoaded', function() { 
document.getElementById('start-button').addEventListener('click', function() { 
window.location.href = 'game.html'; 
}); 
}); 
</script> 
</body> 
</html>

JavaScriptを含んだHTMLファイルには、ゲーム画面が実装されています。実際にプレイすると、自然派の美容アイテムを操作し、バターが出す障害物を避けるというゲームとなっています。

以下は、ゲーム画面のコードを抜粋したものです。

<!DOCTYPE html> 
<html> 
<head> 
<title>自然 vs バター</title> 
<meta charset="UTF-8"> 
<style> 
canvas { 
border: 2px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="400" height="400"></canvas> 
<script> 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var natural_image = new Image(); 
natural_image.src = 'natural.png'; 
var butter_image = new Image(); 
butter_image.src = 'butter.png'; 
var natural_x = 200; 
var natural_y = 350; 
var natural_speed = 5; 
var butter_x = Math.floor(Math.random() * 350) + 25; 
var butter_y = 0; 
var butter_speed = 3; 
var score = 0; 
function gameLoop() { 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.drawImage(natural_image, natural_x - 25, natural_y - 25, 50, 50); 
ctx.drawImage(butter_image, butter_x - 25, butter_y - 25, 50, 50); 
natural_x = natural_x + natural_speed; 
if (natural_x < 25 || natural_x > 375) { 
natural_speed = natural_speed * -1; 
} 
butter_y = butter_y + butter_speed; 
if (butter_y > 375) { 
butter_x = Math.floor(Math.random() * 350) + 25; 
butter_y = 0; 
score++; 
} 
if (Math.abs(natural_x - butter_x) < 50 && Math.abs(natural_y - butter_y) < 50) { 
alert('バターに触れた！'); 
window.location.href = 'index.html'; 
} 
ctx.fillText('スコア: ' + score, 10, 390); 
window.requestAnimationFrame(gameLoop); 
} 
gameLoop(); 
document.addEventListener('keydown', function(event) { 
if (event.key === 'ArrowLeft') { 
natural_x = natural_x - natural_speed; 
if (natural_x < 25) { 
natural_x = 25; 
} 
} else if (event.key === 'ArrowRight') { 
natural_x = natural_x + natural_speed; 
if (natural_x > 375) { 
natural_x = 375; 
} 
} 
}); 
</script> 
</body> 
</html>