xbeat

# coding=utf-8
# Copyright 2023 The HuggingFace Inc. team. All rights reserved.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software

xbeat

<canvas id="floor-texture" width="512" height="256"></canvas>
<div id="score-left"></div>
<div id="score-right"></div>
<div id="how">Position mouse left and right over game area to control paddles / bats</div>
<div id="btn-container">
  <button id="btn-go-fs" class="btn-fs" onclick="requestFullscreen()">go fullscreen</button>
  <button id="btn-exit-fs" class="btn-fs" onclick="exitFullscreen()">exit fullscreen</button>
</div>

xbeat

Drag & Drop Player w/ collision detection

This is a tiny script which allows anything with the class of ".draggable" to be dragged and dropped.

A Pen by Giuseppe Canale on CodePen.

License.

xbeat

<div class="container">
  <h1>Three.JS + Dat.GUI</h1>
  <h3>Created by Matthew Blode</h3>
</div>


<div id="threejs"></div>

xbeat

Help Modal Window

A Pen by Giuseppe Canale on CodePen.

License.

xbeat

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

let container = document.createElement( 'div' );
document.body.appendChild( container );
let camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 100000 );

camera.position.x = 1200;

xbeat

<div id="skill-change-value-container">
   <div id="qty-subtract" class="skill-change-value">    
      <a class="btn">-</a>
   </div>
   <div id="qty-addition" class="skill-change-value">    
      <a class="btn">+</a>
   </div>
</div>

xbeat

<div id="hotArea"></div>

<div id="wrapperMain" class="wrapperMain">
	<div class="icon settings">
		<svg width="50px" heigth="50px" id="Setup" x="0px" y="0px" viewBox="0 0 234 234">
			<path style="fill: rgb(147, 62, 197);" d="M7.5,42.571h39.235c3.327,12.646,14.856,22,28.531,22s25.204-9.354,28.531-22H226.5c4.142,0,7.5-3.358,7.5-7.5s-3.358-7.5-7.5-7.5H103.796c-3.327-12.646-14.856-22-28.531-22s-25.204,9.354-28.531,22H7.5c-4.142,0-7.5,3.358-7.5,7.5S3.358,42.571,7.5,42.571z M75.266,20.571c7.995,0,14.5,6.505,14.5,14.5s-6.505,14.5-14.5,14.5c-7.995,0-14.5-6.505-14.5-14.5S67.271,20.571,75.266,20.571z"></path>
			<path style="fill: rgb(147, 62, 197);" d="M226.5,109.5h-49.99c-3.327-12.646-14.856-22-28.531-22c-13.675,0-25.204,9.354-28.531,22H7.5c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h111.949c3.327,12.645,14.856,22,28.531,22c13.675,0,25.204-9.355,28.531-22h49.99c4.142,0,7.5-3.358,7.5-7.5S230.642,109.5,226.5,109.5z M147.98,131.5c-7.995,0-14.5-6.505-14.5-14.5s6.505-14.5,14.5-14.5c7.995,0,14.5,6.505,14.5,14.5S155.975,

xbeat

Horizontal Timeline

A Pen by Giuseppe Canale on CodePen.

License.

xbeat

<div class="click">Reset Camera</div>
<div class="webgl"></div>