HTML5 游戏：控制角色移动寻找宝箱
<style>
#character{
position: absolute;
top: 100px;
left: 100px;
width: 50px;
height: 50px;
background-image: url('img/player3.gif');
background-size: cover;
cursor: pointer;
}
#treasure{
position: absolute;
top: 300px;
left: 500px;
width: 50px;
height: 50px;
background-image: url('img/treasure_closed.gif');
background-size: cover;
}
</style>
</head>
<body>
<div id="character"></div>
<div id="treasure"></div>
</div>
<script>
// 角色状态
var isTransformed = false;
<pre><code> // 监听鼠标双击事件
$('#character').dblclick(function(){
transformCharacter();
});
// 监听键盘事件
$(document).keydown(function(event){
switch(event.keyCode){
case 65: // 左
moveCharacter('left');
break;
case 87: // 上
moveCharacter('up');
break;
case 68: // 右
moveCharacter('right');
break;
case 83: // 下
moveCharacter('down');
break;
}
});
// 角色移动
function moveCharacter(direction){
var character = $('#character');
var currentPosition = character.position();
var newPosition = {};
switch(direction){
case 'left':
newPosition = {top: currentPosition.top, left: currentPosition.left - 50};
character.css('background-image', 'url(' + (isTransformed ? 'img/playerbig_left.gif' : 'img/player_left.gif') + ')');
break;
case 'right':
newPosition = {top: currentPosition.top, left: currentPosition.left + 50};
character.css('background-image', 'url(' + (isTransformed ? 'img/playerbig_right.gif' : 'img/player_right.gif') + ')');
break;
case 'up':
newPosition = {top: currentPosition.top - 50, left: currentPosition.left};
character.css('background-image', 'url(' + (isTransformed ? 'img/player1_big.gif' : 'img/player1.gif') + ')');
break;
case 'down':
newPosition = {top: currentPosition.top + 50, left: currentPosition.left};
character.css('background-image', 'url(' + (isTransformed ? 'img/player1_big.gif' : 'img/player3.gif') + ')');
break;
}
character.animate(newPosition, 200);
checkTreasure();
}
// 角色变身
function transformCharacter(){
isTransformed = !isTransformed;
var character = $('#character');
character.css('background-image', 'url(' + (isTransformed ? 'img/player2.gif' : 'img/player3.gif') + ')');
}
// 检查是否找到宝箱
function checkTreasure(){
var character = $('#character');
var treasure = $('#treasure');
var characterPosition = character.position();
var treasurePosition = treasure.position();
var distanceX = Math.abs(characterPosition.left - treasurePosition.left);
var distanceY = Math.abs(characterPosition.top - treasurePosition.top);
if(distanceX < 50 && distanceY < 50){
// 角色找到了宝箱
alert('你找到了宝箱！');
treasure.css('background-image', 'url(img/treasure_open.gif)');
}
}
</script>
</code></pre>
原文地址: https://www.cveoy.top/t/topic/naek 著作权归作者所有。请勿转载和采集!