canvas-小游戏-控制人走向

最新推荐文章于 2024-08-15 15:52:56 发布

空谷足音 -จุ

最新推荐文章于 2024-08-15 15:52:56 发布

阅读量551

点赞数 2

分类专栏： canvas 前端文章标签： canvas canvas小游戏

本文链接：https://blog.csdn.net/davidPan1234/article/details/96480028

版权

这篇博客介绍了如何利用HTML5的canvas元素创建一个小游戏，通过键盘的上下左右键控制角色在画布上移动。内容详细解析了drawImage()方法的参数含义，并展示了边界控制的switch语句实现。

摘要由CSDN通过智能技术生成

实现效果：通过键盘的上下左右键控制人的走动？

代码实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    body {background:black; text-align: center;}
    #c1 {background:white;}
    </style>
    <script>
    window.onload=function (){
      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');
      let oImg=new Image();
      oImg.src='sprit1.jpg';

      //第1帧     84      27
      //第2帧     111     27
      //第3帧